<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="tree-list.css">
    <script type="text/montage-serialization">
    {
        "owner": {
            "values": {
                "element": {"#": "owner"},
                "_placeholder": {"#": "placeholder"},
                "_treeListWrapper": {"#": "treeListWrapper"},
                "repetition": {"@": "repetition"},
                "repetitionController": {"@": "repetitionController"}
            }
        },

        "repetitionController": {
            "prototype": "core/range-controller"
        },

        "repetition": {
            "prototype": "ui/repetition.reel",
            "values": {
                "element": {"#": "repetition"},
                "contentController": {"@": "repetitionController"}
            }
        },

        ":iteration": {
           "alias": "@repetition:iteration"
        }
    }
    </script>
</head>
<body>
    <div data-montage-id="owner" class="montage-TreeList">
        <div data-montage-id="treeListWrapper" class="montage-TreeList-wrapper">
            <div data-montage-id="repetition" class="montage-TreeList-repetition">
                <div class="montage-TreeList-nodeWrapper">
                    <div data-param="*"></div>
                </div>
            </div>
        </div>
        <div data-montage-id="placeholder" class="montage-TreeList-placeholder over"></div>
    </div>
</body>
</html>
